<template>
  <el-header id="header">
    <span class="hideAside" @click="collapse"><i class="fa fa-indent fa-lg"></i>切换</span>

    <ul class="personal">
      <li>
        <img src="http://121.36.172.205//userImg/yhtx08.png" alt="">
      </li>
      <li>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-linkdd">
            ssssssssss
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="info">基本信息</el-dropdown-item>
              <el-dropdown-item command="editPassword">修改密码</el-dropdown-item>
              <el-dropdown-item command="xx">我的工作台</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li> 
    </ul> 
  </el-header>
</template>

<script setup lang="ts">
 
import { useRouter } from "vue-router";
import { useSystemStore } from '@/stores/system'
const systemStore = useSystemStore();
  

const router = useRouter();
 
    
const collapse = () => {
  systemStore.toggleCollapse();
}
   

const handleCommand = (command: string) => {
  if ("logout" == command) {
    sessionStorage.removeItem("token");
    sessionStorage.removeItem("schoolInfo")

    //store.commit("logout"); //vuex

    //跳转到登录界面
    router.push("/login");
  } else if ("editPassword" == command) {
    //TODO
  }
}
 
</script>

<style scoped>
#header .personal .el-dropdown-link,
#header .hideAside {
  cursor: pointer;
}

#header {
  max-height: 50px;
  line-height: 50px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
}

#header .personal {
  display: flex;
  flex-direction: row;
  align-content: center;
}

#header .personal li {
  margin-left: 13px;
  margin-right: 13px;
  display: flex;
  flex-direction: row;
  align-items: center;
}


#header .personal li img {
  width: 40px;
  border-radius: 50%;
}
</style>
